<template>
	<div>
		<div class="commonPop" :class="show ? 'show' : ''" @click="close"></div>
		<div class="commonMain" :class="show ? 'show' : ''" @click.stop>
			<div class="loginMain flex">
				<img src="/img/login_background.png" class="left"/>
				<div class="right flex">
					<div @click="close" class="close iconfont icon-yuyinguanbi"></div>
					<img src="/img/logo.svg" class="logo" />
					<div class="desc">修改手机号码 1/2</div>
					<div class="phoneView flex" style="margin-top: 30px;">
						<span class="iconfont icon-shouji1"></span>
						<input type="number" maxlength="11" placeholder="请输入手机号" class="input" />
						<span class="code">发送验证码</span>
					</div>
					<div class="phoneView flex">
						<span class="iconfont icon-yanzhengma"></span>
						<input type="number" maxlength="6" placeholder="6位数的验证码" class="input" />
					</div>
					<div class="mobileBtn flex" v-if="!false">下一步</div>
					<div class="mobileBtn flex" v-else>
						<loading style="transform: scale(0.7);" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 显示隐藏
				show: false,
				
			}
		},
		methods: {
			
			// 打开弹窗
			open(){
				this.show = true;
			},
			
			// 关闭弹窗
			close(){
				this.show = false;
			},
			
		},
		asyncData({ app }) {
			
		},
	}
</script>

<style lang="scss" scoped>
	.commonPop{
		background: rgba(0,0,0,0.55);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		visibility: hidden;
		opacity: 0;
		transition: 0.2s all;
		backdrop-filter: blur(10px);
		&.show{
			opacity: 1;
			visibility: visible;
		}
	}
	.commonMain{
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 900px;
		z-index: 2001;
		overflow: hidden;
		top: -100%;
		transition: 0.15s all;
		&.show{
			top: 50%;
		}
		.loginMain{
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 502px;
			.left{
				height: 100%;
				width: 330px;
				border-radius: 15px 0 0 15px;
			}
			.right{
				background: #FFF;
				flex: 1;
				width: 0;
				height: 100%;
				border-radius: 0 15px 15px 0;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.close{
					position: absolute;
					right: 20px;
					top: 20px;
					font-size: 20px;
					color: #c3c3c3;
					line-height: 30px;
					width: 30px;
					text-align: center;
					cursor: pointer;
					transition: 0.2s all;
					&:hover{
						opacity: 0.8;
					}
				}
				.logo{
					width: 160px;
				}
				.desc{
					font-size: 15px;
					color: #999;
					line-height: 1.2;
					margin-top: 16px;
				}
				.wechatHead{
					flex-direction: row;
					align-items: center;
					margin-top: 30px;
					.iconfont{
						color: #08c160;
						font-size: 20px;
						margin-right: 10px;
					}
					.text{
						font-size: 18px;
						color: #08c160;
					}
				}
				.qrcode{
					margin-top: 20px;
					width: 200px;
					height: 200px;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					position: relative;
					border-radius: 16px;
					overflow: hidden;
					&>img{
						width: 100%;
						height: 100%;
					}
					.exipod{
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						background: rgba(0,0,0,0.8);
						span{
							color: #FFF;
							font-size: 15px;
							line-height: 1.2;
						}
						.btn{
							color: #FFF;
							font-size: 15px;
							border: 1px solid #FFF;
							line-height: 35px;
							padding: 0 20px;
							margin-top: 20px;
							border-radius: 100px;
							transition: 0.2s all;
							cursor: pointer;
							&:hover{
								opacity: 0.8;
							}
						}
					}
				}
				.changeLogin{
					color: #20a0ff;
					transition: 0.2s all;
					cursor: pointer;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					height: 30px;
					margin-top: 25px;
					&:hover{
						opacity: 0.8;
					}
					.text{
						font-size: 16px;
					}
					.iconfont{
						margin-left: 5px;
						font-size: 16px;
					}
				}
				.mobileBtn{
					background: #292929;
					color: #FFF;
					font-size: 17px;
					font-weight: bold;
					height: 51px;
					width: 70%;
					border-radius: 100px;
					text-align: center;
					margin-top: 15px;
					cursor: pointer;
					transition: 0.2s all;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					&:hover{
						opacity: 0.8;
					}
				}
				.phoneView{
					width: 70%;
					flex-direction: row;
					align-items: center;
					padding: 9px 9px 9px 15px;
					border-radius: 6px;
					margin-bottom: 20px;
					background: #F6F6F6;
					.iconfont{
						color: #999;
						font-size: 19px;
						width: 23px;
						text-align: center;
						line-height: 1.2;
					}
					.input{
						height: 37.5px;
						line-height: 37.5px;
						flex: 1;
						width: 0;
						font-size: 15px;
						margin-left: 10px;
						color: #333;
						font-weight: bold;
						outline: none;
						background: none;
						border: 0;
						&::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
							-webkit-appearance: none;
						}
					}
					.code{
						line-height: 37.5px;
						text-align: center;
						color: #20a0ff;
						font-weight:bold;
						font-size: 15px;
						transition: 0.2s all;
						margin-right: 10px;
						cursor: pointer;
						&.dis{
							opacity: 0.6;
						}
						&:hover{
							opacity: 0.8;
						}
					}
				}
			}
		}
	}
</style>